<template>
  <div class="InputOneToOneBox">
    <template v-if="label == 'UID'">
      <div class="lab">{{ label }}</div>
      <div class="input">
        <input
          class="dis"
          disabled
          type="text"
          :class="{
            dark_input: theme.state.themeState == 'drak',
            light_input: theme.state.themeState == 'light',
          }"
          :value="userCarId"
        />
        <p>
          {{ explain }}
          <template v-if="flag">
            <span @click="submit">提交</span>
            <span @click="reset">取消</span>
          </template>
        </p>
      </div>
    </template>
    <template v-else>
      <div class="lab">{{ label }}</div>
      <div class="input">
        <input
          type="text"
          :class="{
            dark_input: theme.state.themeState == 'drak',
            light_input: theme.state.themeState == 'light',
          }"
          v-model="val"
        />
        <p>
          {{ explain }}
          <template v-if="flag">
            <span @click="submit">提交</span>
            <span @click="reset">取消</span></template
          >
        </p>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import ins from "../../utils/Axios";

@Options({
  mounted() {
    if (this.label == "昵称") {
      this.val = this.theme.state.login.userInfo.nick;
      this.lastVal = this.theme.state.login.userInfo.nick;
      this.type = "nick";
      this.obj.nick = this.val;
    } else if (this.label == "个人简介") {
      this.val = this.theme.state.login.userInfo.synopsis;
      this.lastVal = this.theme.state.login.userInfo.synopsis;
      this.type = "synopsis";
      this.obj.synopsis = this.val;
    }
    this.userCarId = this.theme.state.login.userInfo.userCarId;
  },
  props: {
    label: String,
    explain: String,
  },
  watch: {
    val(newval, oldval) {
      if (newval == this.lastVal) {
        this.flag = false;
      } else {
        this.flag = true;
      }
      this.obj[Object.keys(this.obj)[0]] = newval;
    },
  },
})
export default class InputOneToOne extends Vue {
  theme: any = useStore();
  userCarId: String = "";
  lastVal: String = "";
  val: String = "";
  flag: boolean = false;
  type: String = "";
  obj: Object = {};
  //上传数据
  submit() {
    if (this.val.length > 20 || this.val.length == 0) {
      ElMessage.error("【ERROR】长度不符合要求");
      return;
    }

    ins
      .post("/user/editUserInfo", this.obj)
      .then((res: any) => {
        const { data } = res;
        if (data.flag) {
          //更新数据
          this.theme.dispatch("userInfoChange", "0");
          this.flag = false;
        } else {
          ElMessage.error("【ERROR】网络繁忙请重试！");
        }
      })
      .catch((err: any) => {
        ElMessage.error("【ERROR】服务器连接断开，请稍后重试！");
      });
  }
  //重置数据
  reset() {
    this.val = this.lastVal;
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>
